<script setup lang="ts">
import Editor from "@/components/common/Editor.vue";
import { ProForm } from "@/modules/package/form";
import { ElInput, ElMessage } from "element-plus";

import useForm from "@/hooks/useForm";
import ApiContent from "@/api/content";
import Uploader from "@/components/common/Uploader.vue";
const emits = defineEmits<{
  success: [];
}>();
const props = defineProps<{
  source?: any;
  modalApi?: any;
}>();

const formItems = [
  {
    label: "标题",
    children: {
      field: "title",
      type: ElInput,
    },
  },

  {
    label: "内容详情",
    hidden: (model: any) => model?.content_type == 5,
    children: {
      field: "content",
      type: Editor,
    },
  },

  {
    label: "客服电话",
    hidden: (model: any) => model?.content_type != 5,
    children: {
      field: "mobile",
      type: ElInput,
    },
  },

  {
    label: "客服二维码",
    hidden: (model: any) => model?.content_type != 5,
    children: {
      field: "qr_code",
      type: Uploader,
      props: {
        listType: "picture-card",
        showFileList: false,
      },
    },
  },
];

const rules = {
  title: { required: true, message: "请输入标题" },
};

const { refForm, model, isFetching, submit, reset, onFetchResponse } = useForm(
  props.source ? ApiContent.updateInfo : ApiContent.addInfo,
  {
    defaultModel: {
      qr_code: "",
      category: 1,
      ...props.source,
    },
  }
);

onFetchResponse(() => {
  ElMessage.success("编辑完成！");
  props.modalApi?.close();
  emits("success");
});
</script>
<template>
  <ProForm
    ref="refForm"
    label-width="6em"
    :col="24"
    :rules="rules"
    :model="model"
    :loading="isFetching"
    :form-items="formItems"
    @reset="reset"
    @submit="submit"
  />
</template>
